<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<title>Insert title here</title>
<link type="text/css" href="./css/jquery-ui-1.8.20.custom.css" media="screen" rel="stylesheet">
<link type="text/css" href="./css/ui.jqgrid.css" media="screen" rel="stylesheet">
<link type="text/css" href="./css/ui.multiselect.css" media="screen" rel="stylesheet">
<link type="text/css" href="./css/searchFilter.css" media="screen" rel="stylesheet">


<script src="./js/jquery.js" type="text/javascript"></script>
<!-- <script src="../../js/jqgrid/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script> -->
<script src="./js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="./js/plugins/ui.multiselect.js" type="text/javascript"></script>


<script src="./js/i18n/grid.locale-es.js" type="text/javascript"></script>
<script src="./js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script src="./js/commons.js" type="text/javascript"></script>




<link rel="stylesheet" href="./css/tinydropdown.css" type="text/css" />
	<script type="text/javascript" src="./js/tinydropdown.js"></script>	
	
	
	
	
	
	<script src="js/jquery.ui.core.js"></script>
	<script src="js/jquery.ui.widget.js"></script>
	<script src="js/jquery.ui.mouse.js"></script>
	<script src="js/jquery.ui.button.js"></script>
	<script src="js/jquery.ui.draggable.js"></script>
	<script src="js/jquery.ui.position.js"></script>
	<script src="js/jquery.ui.resizable.js"></script>
	<script src="js/jquery.ui.button.js"></script>
	<script src="js/jquery.ui.dialog.js"></script>
	<script src="js/jquery.ui.effect.js"></script>
	
	<script src="js/jquery.ui.core.js"></script>
	<script src="js/jquery.ui.widget.js"></script>
	<script src="js/jquery.ui.button.js"></script>
	<script src="js/jquery.ui.position.js"></script>
	<script src="js/jquery.ui.menu.js"></script>
	<script src="js/jquery.ui.autocomplete.js"></script>
	<script src="js/jquery.ui.tooltip.js"></script>
	
	<style>
		body { font-size: 62.5%; }
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#users-contain { width: 350px; margin: 20px 0; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
		
		
		.custom-combobox {
		position: relative;
		display: inline-block;
	}
	.custom-combobox-toggle {
		position: absolute;
		top: 0;
		bottom: 0;
		margin-left: -1px;
		padding: 0;
		/* support: IE7 */
		*height: 1.7em;
		*top: 0.1em;
	}
	.custom-combobox-input {
		margin: 0;
		padding: 0.3em;
	}
	</style>
	
	
	
</head>
<body style="width: 100%" topmargin="0">




<div>
            </div>
         
            <div class="WhiteArea" style="margin-left:auto;">
						                 
						<table align="center" cellpadding="0px" cellspacing="0" style="top:0px;">
							<tr><td>&nbsp;</td></tr>
							<!-- <tr><td align="center"><img alt="" src="../../images/reporte_catalogo_punto_venta.png" ></td></tr> -->
							<tr>
								<td>
									<table id="grid"></table>
									<div id="grid_detail"></div>
								</td>
							</tr>
						</table>
            </div>    
			
			
</div>  	

</body>



<script>
$("#grid").jqGrid({
    url:'getPerfilGrid.do',
    datatype: "json",
    width:900,
colNames:['','Nombre Perfil','Descripcion Perfil'],
    colModel:[
    {
        name:'id',
        index:'id',
        sortable: true, 
        hidden: true , 
        editable: true, 
        width:55
    }
    ,{
        name:'nombrePerfil',
        index:'nombrePerfil',
        sortable: true, 
        editable: true,  
        editrules: { required: true},
        editoptions:{readonly: false},        
        width:55
    },{
        name:'descripcionPerfil',
        index:'descripcionPerfil',
        sortable: true, 
        editable: true,  
        editrules: { required: true},
        editoptions:{readonly: false},        
        width:55
    }
    ],
    ondblClickRow: function(id_gerencia){
       // alert(bancoid)    
           
    },
    rowNum:10,
    rowList:[10,20,30],
    pager: '#grid_detail',
    sortname: 'id',
    viewrecords: true,
    sortable: true,
    sortorder: "desc",
    multiselect: false,
    caption:"Catalogo de estados",
    loadonce : false,
    rowTotal: 'total',
    records:'records',
    jsonReader: {
        repeatitems: false,
        id: "id"
    }
});

$("#grid").jqGrid('navGrid','#grid_detail',{
    //edit:true,
    add:true,
    del:true,
    view :false,
    search: false 
},{closeAfterEdit:true,url:'cudCatalogoPerfil.do?accion=edit'},{closeAfterAdd:true,url:'cudCatalogoPerfil.do?accion=add'},{url:'cudCatalogoPerfil.do?accion=del'});

	</script>



  
  
</html>